<template>
  <van-overlay :show="data.show" @click="close">
    <div class="modal" @click.stop>
      <div class="modalTitle">修改</div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="data.text"
          :name="name"
          :label="name"
          :placeholder="'请输入'+name"
          :rules="[{ required: true, message: '请填写'+name }]"
        />
        <div style="margin: 16px;">
          <van-button 
            size="small" 
            round 
            block 
            type="primary" 
            :disabled="data.loading"
            :loading="data.loading"
            :loading-text="data.loadingText"
            native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </van-overlay>
</template>


<script lang="ts" src="./modal.ts"></script>
<style lang="less" scoped src="./modal.less"></style>

// 所有的prop都会使得其父子prop之间形成一个 单向下行绑定 。
// 父级 prop 的更新会向下流动到子组件中，但是反过来不行。这样可以防止从子组件意外变更父级组件的状态。
// 每次父级组件更新后，子组件所有prop都会刷新为最新的值。

// vue3的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用
// beforeCreate -> 使用setup()
// created -> 使用 setup()
// beforeMount -> onBeforeMount
// mounted -> onMounted
// beforeUpdate -> onBeforeUpdate
// updated -> onUpdated
// beforeDestroy -> onBeforeUnmount
// destroyed -> onUnmounted
// errorCaptured -> onErrorCaptured